<template>
  <div class="app">
    <wxc-minibar
      title
      leftButton
      background-color="#1eb76e"
      text-color="#FFFFFF"
      right-text="创建"
      left-text="我的课程"
      @wxcMinibarRightButtonClicked="minibarRightButtonClick"
    ></wxc-minibar>

    <!-- 创建弹框 -->
    <wxc-popover
      ref="wxc-popover"
      :buttons="btns"
      :position="popoverPosition"
      :arrowPosition="popoverArrowPosition"
      @wxcPopoverButtonClicked="openMask"
    ></wxc-popover>

    <scroller class="homeBox" :style="{height:pageHeight+'px'}">
           <!-- 老师课程班级 -->
           <div class="ListBox"  v-for="(item,index) in lists" :key="index">
             
                    <div class="listItem">
                        <div class="listTitle" ref="headTit">
                            <div class="listinerTit" @click="titAnimate(index)">
                                <!-- <icon class="innerIocn" :class="[deindex == index ? 'innerIocncur' : '']" :eeui="{content:'md-today',fontSize:38}"></icon> -->
                                <text class="iconfont innerIocn" :class="[deindex == index ? 'innerIocncur' : '']">&#xe649;</text>
                                <text class="hTit" :class="[deindex == index ? 'hTitcur' : '']">{{item.course_name}}</text>
                                <!-- <icon class="zedieIcon" :eeui="{content:deindex == index ? 'ios-arrow-down':IconContent,fontSize:38}"></icon> -->
                                <wxc-icon class="zedieIcon" :name="deindex === index ? topBarIcon01 : topBarIcon02"></wxc-icon>
                            </div>
                            
                        </div>
                        <div class="contbox" v-if="deindex == index">
                            <div class="innerimgbox">
                                <image class="innerimg" :src="item.course_cover | filterImg" style="width:650px;height:360px"></image>
                                <div class="greyBg">
                                
                                    <!-- <text class="gtext" >{{item.course_id}}</text> -->
                                    <text class="gtext">{{item.teacher_name}}</text>
                                </div>
                                <!-- <text class="zixun">资讯</text> -->
                                <text class="seticon" @click="dropwrapshow(item)">&#xe683;</text>
                                <!-- <text class="seticon2">&#xe68d;</text> -->
                                <div class="dropwrap" v-if="item.dropShow">
                                    <text class="dropitem" @click="SetCourseClass(item)">课程班级</text>
                                    <text class="dropitem" @click="courseFileOver(item.course_id)">归档课程</text>
                                  
                                </div>

                            </div>
                            <div class="contbox2" v-for="(child,v) in item.classes" :key= "v" >
                                <!-- v-if="v<item.moreBthnum" -->
                                <div class="cont" >
                                    <div class="contimgbox">
                                 
                                    <image class="contImg" src="https://www.asyke.com/static/img/personicoo.png" style="width:60px;height:60px"></image>
                                    </div>
                                    <div class="banji">
                                        <text class="Bjtext">{{child.course_class_name}}</text>
                                        <text class="Bjtext1">{{child.student_nums?child.student_nums:0}}人</text>
                                    </div>
                                    <div class="contCenter">
                                        <text class="contCenterText" @click="ewmJump(child.course_class_invite,child.course_class_name,child.class_id,child.course_class_id)">{{child.course_class_invite}}</text>
                                    </div>
                                    <text class="iconfont enterIconmore">&#xe631;</text>
                                    <text class="iconfont enterIcon">&#xe602;</text>
                                    <!-- <icon class="enterIconmore" @click="guidangf(child)" :eeui="{content:'ios-more',fontSize:38}"></icon>
                                    <icon class="enterIcon" @click="enterInnerpage(item.course_name,child.course_class_name,child.course_class_id,item.course_id,userInfo.type)" :eeui="{content:'ios-arrow-dropright-circle',fontSize:38}"></icon> -->
                                </div>

                                <text class="guidang" v-if="child.guidang" @click="classSetFile(child,v,item)">归档班级</text>

                                
                                
                                
                            </div>
                            <text class="morelistBtn" v-if="item.classes.length>item.moreBthnum" @click="moreBtn(index)">加载更多</text>
                            
                        </div>
                        
                        
                        

                    </div>
            
          </div>
               
    </scroller>

  

    <!-- mask -->
    <wxc-mask height="800"
                width="660"
                border-radius="6"
                duration="200"
                mask-bg-color="#FFFFFF"
                :has-animation="hasAnimation"
                :has-overlay="true"
                :show-close="true"
                :show="maskshow"
                @wxcMaskSetHidden="wxcMaskSetHidden">
        <div class="content">
            <text class="masktitle">添加课程</text>
            <div class="maskcont">
                <div class="maskimgbox">
                    <div class="maskImage" >
                        <image class="maskimg" :src="courseFile" style="width:190;height:114px;"></image>
                        <text class="maskchengtext" @click="pitureuploud">修改</text>
                    </div>
                    <div class="maskinputbox">
                         <input class="maskinput" type="text" placeholder="输入课程名称" v-model="courseClassName">
                    </div>
                   

                </div>
                <div class="maskclassLinebox">
                    <scroller class="maskclassLineScroller">
                        <div class="maskclassLine" v-for="(classitem,index) in courseClassValue" :key="index">
                            <input class="maskeditinput" 
                            autofocus="true" 
                            v-if="courseClassList[index].show" 
                            type="text" 
                            v-model="courseClassValue[index]"
                            @blur="courseClassList[index].show = false"
                            >
                            <text class="defaultclass" v-if="!courseClassList[index].show">{{classitem}}</text>
                            
                            <div class="twoediticon">
                                <text class="editicon" @click="editClass(index)">&#xe6b0;</text>
                                <text class="delelticon" @click="deletClass(index)">&#xe62c;</text>
                            </div>
                            
                        </div>
                    </scroller>
                    
                </div>

                <div class="commitBtn">
                    <button @click="newAddclass" class="maskbutton"  :eeui="{text:'新增班级',borderRadius:'0',backgroundColor:'#eaeaea',color:'#222222'}"></button>
                    <button class="maskbutton" @click="createClass(courseClassName,courseFile,courseTypeIndex,JSON.stringify(courseClassValue))" :eeui="{text:'确定',borderRadius:'0',backgroundColor:'#2fdc7e',color:'#ffffff'}"></button>
                </div>

            </div>
            
        </div>
    </wxc-mask>

    <!-- 课程班级 -->
        <wxc-mask height="800"
                width="660"
                border-radius="6"
                duration="200"
                mask-bg-color="#FFFFFF"
                :has-animation="hasAnimation"
                :has-overlay="true"
                :show-close="true"
                :show="maskclassshow"
                @wxcMaskSetHidden="wxcMaskSetHidden">
            <div class="content">
                <text class="masktitle">课程班级</text>
                <div class="maskcont">
                    <div class="maskimgbox">
                        <div class="maskImage" >
                            <image class="maskimg" :src="ClassInfo.courseFile" style="width:190;height:114px;"></image>
                            <text class="maskchengtext" @click="pitureuploud2">修改</text>
                        </div>
                        <div class="maskinputbox">
                            <input class="maskinput" type="text" v-model="ClassInfo.curseName">
                           
                        </div>
                    </div>
                    <div class="maskclassLinebox">
                        <scroller class="maskclassLineScroller">
                            <div class="maskclassLine" v-for="(classitem2,index) in ClassInfo.classList" :key="index">
                                <input 
                                    class="maskeditinput" 
                                    autofocus="true" 
                                    v-if="classitem2.inputShow" type="text" 
                                    v-model="classitem2.course_class_name"
                                    @blur="xgClass(classitem2)"
                                >
                                <text class="defaultclass" v-if="!classitem2.inputShow">{{classitem2.course_class_name}}</text>
                                
                                <div class="twoediticon">
                                    <text class="editicon" @click="editClass2(index)">&#xe6b0;</text>
                                </div>
                                
                            </div>
                        </scroller>
                        
                    </div>

                    <div class="commitBtn">
                        <button @click="addClassAPi(ClassInfo.course_id)" class="maskbutton"  :eeui="{text:'新增班级',borderRadius:'0',backgroundColor:'#eaeaea',color:'#222222'}"></button>
                        <button class="maskbutton" @click="changeClass" :eeui="{text:'确定',borderRadius:'0',backgroundColor:'#2fdc7e',color:'#ffffff'}"></button>
                    </div>

                </div>
                
            </div>
        </wxc-mask>
  </div>
</template>
<script>
import { WxcMinibar, WxcPopover,WxcIcon,WxcMask } from "weex-ui";
const modal = weex.requireModule("modal");
const stream = weex.requireModule("stream");
const storage = weex.requireModule("storage");
import API from "../../fetch/api.js";

export default {
  components: { WxcMinibar, WxcPopover,WxcIcon,WxcMask},
  data() {
    return {
      btns: [
        {
          text: "我要开课",
          key: "kaike"
        },
        {
          text: "加入班级",
          key: "addclass"
        }
      ],
      maskclassshow:false,
      popoverPosition: { x: -14, y: 80 },
      popoverArrowPosition: { pos: "top", x: -15 },
      lists: [],
      token: "",
      deindex:0,
      pageHeight: "",
      topBarIcon01:'more_unfold',
      topBarIcon02:'more',
      ClassInfo:{//课程班级信息
          classList:[],
          curseName:'',
          course_id:'',//班级id
          teacher_id:'',
          courseFile:'https://www.asyke.com/static/img/7.jpg',
      },
      hasAnimation: true,
      maskshow: false,
      courseType:[
          {text:'普通班级',type:0},
          {text:'校园跑',type:1},
      ],
      courseTypeIndex:1,
      classindex:1,
      courseClassList:[
        {show:false}
      ],
      courseClassValue:[
          '班级1',
      ],
      courseTypeIndex2:1,
      classindex2:1,
      courseClassList2:[
        {show:false}
      ],
      courseClassValue2:[
          '班级1',
      ],
      courseClassName:'',
      courseFile:'https://www.asyke.com/static/img/7.jpg',
      
      ClassInfo:{//课程班级信息
          classList:[],
          curseName:'',
          course_id:'',//班级id
          teacher_id:'',
          courseFile:'https://www.asyke.com/static/img/7.jpg',
      },
    };
  },
  watch: {
    token(val){
      this.getTeachList(val)
    }
  },
  filters: {
    filterImg(val){
        //console.log(val.indexOf('http'));
        if(val.indexOf('http') != -1){
            return val;
        }else{
            return 'http://ueditor-upload.oss-cn-beijing.aliyuncs.com' + val;
        }

        
        //console.log('http://ueditor-upload.oss-cn-beijing.aliyuncs.com' + val);
        
    }
  },
  methods: {
     //删除课程
    deletClass(index){
        this.courseClassValue.splice(index,1);
        this.courseClassList.splice(index,1);
    },
    //编辑课程
    editClass(index){
        this.courseClassList.forEach(el => {
            el.show = false;
        });
        this.courseClassList[index].show = true;
    },
    //新增班级
    newAddclass(){
        this.classindex++;
        var classname = '班级' + this.classindex;
        this.courseClassValue.push(classname);
        this.courseClassList.push({show:false});
    },
    titAnimate(index){
                this.deindex2 = -1;
                if(this.deindex == index){
                    this.deindex = -1;              
                }else{
                    this.deindex = index;

                }  
            },
    minibarRightButtonClick() {
      this.$refs["wxc-popover"].wxcPopoverShow();
    },
    dropwrapshow(item){
                
        this.lists.map(val=>{
            if(item.course_id == val.course_id){
                val.dropShow = !val.dropShow ;
            }else{
                val.dropShow = false;
            }

            
        })
        //item.dropShow = !item.dropShow;
        
    },
    //设置班级班级信息
    SetCourseClass(item){
        //console.log(item);
        this.ClassInfo.curseName = item.course_name;
        if(item.course_cover.indexOf('http') != -1){
            this.ClassInfo.courseFile = item.course_cover;
        }else{
            this.ClassInfo.courseFile = 'http://ueditor-upload.oss-cn-beijing.aliyuncs.com' + item.course_cover;
        }
        
        this.ClassInfo.teacher_id = item.teacher_id;
        this.ClassInfo.course_id = item.course_id;
        this.ClassInfo.classList = item.classes;
        this.maskclassshow = true;

    },
    wxcMaskSetHidden () {
                this.maskshow = false;
                this.shaoShow = false;
                this.maskclassshow = false;
            },
    
    openMask(e) {
      //打开加入班级弹框\
      //console.log(e);
      if (e.key == "kaike") {
        this.maskshow = true;
        this.hasAnimation = true;
        //初始化开课弹框
        this.courseTypeIndex = 0;
        this.courseClassName = "";
        this.courseClassValue = ["班级1"];
      } else if (e.key == "addclass") {
        this.addclasShow();
      }
    },
    addclasShow() {
      this.shaoShow = true;
      this.classCode = "";
    },
    //获取token
    getToken() {
      storage.getItem("token", e => {
        if (e.result === "success") {
          this.token = e.data;
        }
      });
    },
    //老师获取班级列表
    getTeachList(token) {
      var self = this;

      stream.fetch(
        {
          method: "GET",
          url: API.getClassList,
          type:'json',
          headers: {
            'Content-Type':'application/json',
            "Authorization": token
          }
        },
        function(ret) {
          if (ret.status == "200") {
            console.log(ret.data);
            for (const val of ret.data) {
              self.$set(val, "moreBthnum", 4);
              self.$set(val, "dropShow", false);
              for (const val2 of val.classes) {
                self.$set(val2, "guidang", false);
                self.$set(val2, "inputShow", false);
              }
            }
            self.lists = ret.data;

            //console.log(self.lists);
          } else {
            if (ret.status == "-1") {
              self.netWorkShow = true;
              return;
            }
            //eeui.toast(decodeURIComponent(ret.headers["x-mzq-message"]));
          }
        }
      );
    }
  },
  created () {
    this.getToken();
    this.pageHeight =
      weex.config.env.deviceHeight / weex.config.env.deviceWidth * 750;
  }
};
</script>
<style scoped>
.maskclassLineScroller{
  height: 400px;
}
.iconfont{
  font-family: iconfont;
}
.homeBox{
    flex: 1;
    padding-bottom:100px;
    background-color: #eee;
}
.maskeditinput{
    width: 300px;
    height: 50px;
    border-width: 1px;
    border-style: solid;
    border-color: #999;
}
    .app {
        background-color: #ebebeb;
    }
    .navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }

    .headtext {
        font-size: 30px;
        color: #ffffff;
    }
    .icon {
        width: 100px;
        height: 100px;
    }
    .ListBox{
       background-color: #ffffff;
       margin-bottom: 20px;
       /* height: 1334px; */
    }
    .listinerTit{
        width: 750px;
        height: 97px;
        flex-direction: row;
        border-bottom-color: #ebebeb;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        align-items: center;
    }
    .innerIocn{
        margin-left: 30px;
        color: #666;
        margin-right: 10px;
        font-size: 35px;
    }
    .innerIocncur{
        color: #2dd178;
    }
    .hTit{
        /* width: 500; */
        font-size: 32px;
         color: #333;
    }
    .hTitcur{
        color: #2dd178;
    }
    .greyBg{
        width: 650px;
        height: 70px;
        flex-direction: row-reverse;
        margin-right: 43px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(5, 5, 5, 0.5);
        align-items: center;
        
    }

    .zixun{
        position: absolute;
        top: 10px;
        left: 40px;
        width: 70px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        background-color: rgba(5, 5, 5, 0.5);
        color: #ffffff;
        border-radius: 100px;

    }
    .gtext{
        color: #ffffff;
        margin-right: 40px;
        font-size: 24px;
    }
    
    .contimgbox{
        background-color: #fedb68;
        justify-content: center;
        width: 80px;
        height: 80px;
        border-radius: 10px;

    }
    .contImg{
        align-self: center;   
    }
    .cont{
        width: 650px;
        flex-direction: row;
        padding-bottom: 30px;
        margin-top: 20px;
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        border-bottom-color: #d8d8d8;
        align-self: center;
        position: relative;
    }
    .guidang{
        position: absolute;
        top: 90px;
        right: 110px;
        font-size: 26px;
        background-color: #eee;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: #999;

    }
    .guidangbox{
        position: absolute;
        top: 90px;
        right: 110px;
        /* width: 100px;
        height: 200px; */

    }
    .guidang2{
       
        font-size: 26px;
        background-color: #eee;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: #999;

    }
    .innerimgbox{
        width: 650px;
        /* height: 300px; */
        border-radius: 10px;
        align-self: center;
        margin-top: 30px;
        position: relative;
        /* pa dd-bottom: 30px; */
    }
    .contCenter{
      position: absolute;
      left: 260px;
      top: 30px;
        
    }
    .contCenterText{
        width: 200px;
        font-size: 28px;
        color: #f7b027;
    }
    .Bjtext{
        font-size: 26px;
    }
    .Bjtext1{
        font-size: 26px;
        color: #999999;
        margin-top: 10px;
    }
    .banji{
        width: 200;
        margin-left: 10px;
    }
    .list{
        padding-bottom: 200px;
    }
     .refresh {
        width: 750;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .indicator-text {
        color: #888888;
        font-size: 28px;
        text-align: center;
    }
    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
    .loading {
    width: 750;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }
  .indicator {
    color: #2dd178;
}
.zedieIcon{
    display: block;
    color: #d8d8d8;
    position: absolute;
    right: 30px;
    top: 30px;
    /* background-color: #333333; */
    
}

.enterIcon{
    color: #2dd178;
    font-size: 40px;
    position: absolute;
    right: 0px;
    top: 30px;
    
}
.enterIconmore{
    color: #999;
    font-size: 60px;
    position: absolute;
    right: 80px;
    top: 20px;
}
.navbutton{
    width:110px;
    height:65px;
    margin-right:25px;
}
.navtext{
    font-size:36px;
    color:#fff;
    margin-left:45px;
}
.seticon{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 20px;
    right: 20px;
    color: #ffffff;
    font-family: iconfont;
    font-size: 40px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 50px;
    line-height: 50px;
    text-align: center;
}
.seticon2{
    position: absolute;
    top: 20px;
    right: 20px;
    color: #ebebeb;
    font-family: iconfont;
    font-size: 40px;
}
.dropwrap{
    width: 160px;
    background-color: #fff;
    position: absolute;
    top: 65px;
    right: 33px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.dropitem{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 30px;
}
.masktitle{
    font-size: 27px;
    text-align: center;
    height: 80px;
    line-height: 80px;
    border-bottom-color: #dddddd;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color: #2222;
}
.popur{
    position: absolute;
    top: 100px;
    right: 30px;
    width: 180px;
    text-align: center;
    background-color: #fff;
    border-right-color: #999;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: #999;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #999;
    border-left-style: solid;
    border-left-width: 1px;


}
.popuritembox{
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 22px;
}
.popuritem{
    font-size: 24px;
}
.popuricon{
    font-family: iconfont;
    font-size: 30px;
    color: #1eb76e;
}
.maskimgbox{
    flex-direction: row;
}
.maskImage{
    width: 190px;
    height: 114px;
    border-radius: 6px;
    position: relative;
}
.maskimgbox{
    margin-top: 20px;
    margin-left: 30px;
}
.maskchengtext{
    width: 190px;
    height: 47px;
    line-height: 47px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 24px;
    text-align: center;
}
.maskinput{
    width: 289px;
    height: 60px;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-radius: 6px;
    margin-left: 30px;
    padding-left: 10px;
}
.maskcont{
    height: 720px;
}
.maskclassLinebox{
    margin-top: 50px;
    height: 440px;
}
.maskclassLine{
    flex-direction: row;
    justify-content: space-between;
    height: 80px;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: #999;
    align-items: center;
    margin-left: 30px;
    margin-right: 30px;
}
.defaultclass{
    font-size: 30px;
    color: #333;
}
.twoediticon{
    flex-direction: row;
}
.editicon{
    font-family: iconfont;
    font-size: 38px;
    color: #999;
    margin-right: 40px;
}
.delelticon{
    font-family: iconfont;
    font-size: 38px;
    color: #999;
}
.commitBtn{
    flex-direction: row;
    margin-top: 20px;
}
.maskbutton{
    width: 330px;
    height: 80px;
}
.shaotitle{
    flex-direction: row;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
    height: 80px;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #999;
    /* border-bottom: 1px solid #eee; */
}
.saoClassInput{
    height: 320px;
    align-items: center;
}
.addTit{
    font-size: 30px;
}
.saoClassTit{
    width: 540px;
    font-size: 28px;
    margin-top: 50px;
    margin-bottom: 30px;
    color: #666666;
}
.saoInputBox{
    border-width: 1px;
    border-style: solid;
    border-color: #dddddd;
    height: 80px;
    padding-left: 20px;
    width: 540px;
}
.maskselriado{
    flex-direction: row;
    margin-top: 20px;

}
.radiobox{
    flex-direction: row;
    margin-left: 20px;
}
.radio{
    width: 40px;
    height: 40px;
    border-radius: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.point{
    width: 30px;
    height: 30px;
    background-color: #1eb76e;
    border-radius: 30px;
}
.radiotext{
    font-size: 30px;
    color: #666666;
}
.morelistBtn{
   width: 190px;
   height: 54px;
   color: #333333;
   font-size: 30px;
   margin-top: 30px;
   margin-bottom: 25px; 
   background-color: #ededed;
   line-height: 54px;
   border-radius: 30px;
   text-align: center;
   margin-left: 285px;
}
.yin{
    width: 35px;
    height: 35px;
    background-color: red;
    color: #fff;
    font-size: 24px;
    border-radius: 35px;
    line-height: 35px;
    text-align: center;
    margin-left: 20px;
}
</style>